<template>
  <div class="w-full h-[64px] flex justify-between items-center pr-10">
    <div class="w-[300px] ml-6 flex justify-start items-center">
      <div @click="goBack" class="cursor-pointer">
        <span> <icon-left /> </span>
        <span class="ml-3 top-title">查看详情</span>
      </div>
    </div>
    <div class="flex-1"></div>
  </div>

  <div class="w-full px-6">
    <a-form ref="refForm" :model="infoForm" label-align="left">
      <div class="title h-[56px] flex items-center bg-white">
        <span>环境监测数据</span>
      </div>
      <div class="info">
        <a-row>
          <a-col :span="8">
            <a-form-item field="" label="资产编号:" label-col-flex="100px">信息文本</a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="" label="资产类别:" label-col-flex="100px">
              信息文本
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="" label="账面价值:" label-col-flex="100px">
              -40000元
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item field="" label="已入表金额:" label-col-flex="100px">0元</a-form-item>
          </a-col>
        </a-row>
      </div>
      <!-- <div class="title h-[56px] flex items-center bg-white">
        <span>关系信息</span>
      </div>

      <div class="w-full border border-inherit">
        <div class="flex justify-between">
          <div class="flex-1"></div>
          <div class="flex items-center"></div>
        </div>
        <div class="echarts">
          <echarts width="100%" height="100%" :data="data"> </echarts>
        </div>
      </div> -->
    </a-form>
  </div>
  <div class="w-full px-6">
    <a-tabs default-active-key="2">
    <a-tab-pane key="1" title="详情">
      <CommonTable
        :showPagination="false"
        :tableData="listData"
        :columnsData="columns"
        :operatorData="operatorData"
        :pageTotal="100"
        @handlerOperator="handlerOperator"
        @handlerPaginationChange="handlerPaginationChange"
      >
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <template #version="{ record }"> V {{ record.version }}.0 </template>
        <template #is_root="{ record }">
          {{ record.is_root === 1 ? '根资源' : '非根资源' }}
        </template>
        <template #sync_consanguinity="{ record }">
          <span v-if="record.sync_consanguinity" class="flex justify-start items-center">
            <div class="circle-point border-[#34C94F] mr-2"></div>
            已关联
          </span>
          <span v-else class="flex justify-start items-center">
            <div class="circle-point border-[#FFAC38] mr-2"></div>
            未关联
          </span>
        </template>
      </CommonTable>
    </a-tab-pane>
    <a-tab-pane key="2" title="减值测试报告">
      <div class="report-container">
        <div class="report-left">
          <div class="report-upload-content">
            <p class="report-upload-title">文件列表</p>
            <img src="@/assets/images/file-upload.png" class="report-upload-icon" @click="addFile"></img>
          </div>
          <div>
            <a-tree :data="treeData">
              <template #icon>
              </template>
              <template #extra="nodeData">
                <a-dropdown>
                  <img src="@/assets/images/more-icon.png" alt="" v-if="!nodeData.children">
                  <template #content>
                    <a-doption @click="downFile">下载</a-doption>
                    <a-doption @click="deleteFile">删除</a-doption>
                  </template>
                </a-dropdown>
              </template>
            </a-tree>
          </div>
        </div>
        <div class="report-right">
          <img src="@/assets/images/registerManage/empty.png" alt="">
        </div>
    </div>
    </a-tab-pane>
    <a-tab-pane key="3">
      <template #title>凭证</template>
      <DownloadPdf
                  voucherName="摊销凭证"
                  isChangeDate
                  :tableData="tableVoucherData"
                  :voucherNumber="voucherNumber"
                  :principalBook="principalBook"
                  :voucherDate="voucherDate"
                  :columns="columsPDF"
                  @onDateChange="onDateChange"
              ></DownloadPdf>
    </a-tab-pane>
  </a-tabs>
  </div>

</template>

<script lang="ts" setup>
import {columsPDF} from './values';
import { h } from 'vue';

const treeData = [
    {
      title: '证书文本信息',
      key: 'node1',
      icon: () => h('img',{
            src:"/src/assets/images/file_icon.png"
          }),
      children: [
        {
          title: 'xx数据资产登记证书',
          key: 'node2',
          icon: () => h('img',{
            src:"/src/assets/images/word-icon.png"
          }),
        },
        {
          title: 'xx数据资产登记证书',
          key: 'node2',
          icon: () => h('img',{
            src:"/src/assets/images/pdf-icon.png"
          }),
        },
      ],
    },
    {
      title: '证书文本信息',
      key: 'node3',
      icon: () => h('img',{
            src:"/src/assets/images/file_icon.png"
          }),
      children: [
        {
          title: 'xx数据资产登记证书',
          key: 'node4',
          icon: () => h('img',{
            src:"/src/assets/images/word-icon.png"
          }),
        },
        {
          title: 'xx数据资产登记证书',
          key: 'node5',
          icon: () => h('img',{
            src:"/src/assets/images/png-icon.png"
          }),
        },
      ],
    },
  ];

const addFile = () => {
  console.log('点击了添加文件”')
}

const handleSelect =(val)=>{
  console.log("选择了",val)
}

const downFile = (val)=>{
  console.log('要下载的文件',val)
}
const deleteFile = (val)=>{
  console.log('要删除的文件',val)
}
interface Resources$1 {
  name: string;
  code: string;
  security_level: string;
  scene: Array<string>;
  update_frequency: string;
}

interface Result$0 {
  create: string;
  business: string;
  data_browsing_number: number;
  data_call_number: number;
  created_time: string;
  create_user_name: string;
  data_begin_time: string;
  data_end_time: string;
  describe: string;
  from: string;
  id: number;
  name: string;
  owner_org_code: [];
  registration_status: string;
  resources: Array<Resources$1>;
  shared: number;
  update_frequency: string;
  update_time: string;
  version: number;
}

import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import echarts from '@/components/echarts_allocation/EachartsView.vue';
import { columns, operatorData } from './values';
const route = useRoute();
const router = useRouter();
interface Resource {
  create: string;
  created_time: string;
  data_browsing_number: number;
  data_call_number: number;
  data_download_number: number;
  data_fields_count: number;
  data_update_time: string;
  from: string;
  id: number;
  is_root: number;
  name: string;
  owner_org_code: any[];
  production_resource: string;
  scene: string[];
  security_level: string;
  sync_consanguinity: boolean;
  update_frequency: string;
  update_time: string;
  version: number;
  describe: string;
  data_begin_time: string;
  data_end_time: string;
  business: string;
  shared: number;
}

const tableVoucherData = ref<any>([])
const voucherNumber = ref()
const principalBook = ref()
const voucherDate = ref()

voucherNumber.value = "2024-3"
voucherDate.value = "2024年07月26日"
principalBook.value = "信息文本"
tableVoucherData.value = [
  {
    template_summary: "入表主体数据产品开发项目结转无形资产",
    template_subject: "520106无形资产数据资源[]",
    debit_amount: "0",
    credit_amount: "0"
  },
  {
    template_summary: "入表主体数据产品开发项目结转无形资产",
    template_subject: "520106研发支持资本化支出",
    debit_amount: "0",
    credit_amount: "0"
  },
  {
    template_summary: "-",
    template_subject: "信息文本",
    debit_amount: "0",
    credit_amount: "0"
  }
]


const listData = ref<T.TResourceList>([]);
/**
 * @method 组织新增渲染
 */
const zuzhi = computed(() => {
  if (infoForm.value.owner_org_code) {
    return infoForm.value.owner_org_code.map((item) => item.name).join(', ');
  }
  return '';
});
const infoForm = ref<Resource>({
  create: '',
  created_time: '',
  data_browsing_number: 0,
  data_call_number: 0,
  data_download_number: 0,
  data_fields_count: 0,
  data_update_time: '',
  from: '',
  id: 0,
  is_root: 0,
  name: '',
  owner_org_code: [],
  production_resource: '',
  scene: [],
  security_level: '',
  sync_consanguinity: false,
  update_frequency: '',
  update_time: '',
  version: 0,
  describe: '',
  data_begin_time: '',
  data_end_time: '',
  business: '',
  shared: 0
});
/**
 * @method 返回
 */
const goBack = () => {
  window.history.go(-1);
};
/**
 * @method 编辑
 */
const handleEdit = () => {
  const id = route.query.id;
  router.push({ name: '资源编辑', query: { action: '资源编辑', id: id } });
};

// 操作事件
function handlerOperator(record: any, item: any) {
  console.log(`[ record ]=>`, record);
  console.log(`[ item ]=>`, item);
  if (!record || !item) return;
 if (item.code === 'edit') {
    editAsset(record);
  }
}
// 编辑资源
function editAsset(item: any) {
  if (!item || !item.id) return;
  router.push({
    name: 'resourceedit',
    params: {
      id: item.id
    }
  });
}
import * as api from '@/api/pack/pack';
/**
 * @method 详情数据
 */
const getDatil = async () => {
  const id = route.query.id;
  let res = await api.getDetails(id as unknown as number);
  infoForm.value = res.data;
};

/**
 * @method 获取信息
 */
const data = ref([
  {
    currently: true,
    id: '资产5',
    name: '测',
    parent_id: ['资源:2'],
    type: '资产',
    version: 1
  }
]);
/**
 * @method 查看关系
 */
const getGuanxi = async (val) => {
  const res = await api.getGuanxi(val);
  data.value = res.data;
  console.log(data.value);
};

onMounted(() => {
  getDatil();
  const id = route.query.id;
  getGuanxi(id);
});
</script>

<style lang="less" scoped>
// 顶部标题
.top-title {
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  color: #394d73;
}
.title {
  opacity: 1;
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  color: #394d73;
}
.info {
  height: 96px;
  border-radius: 8px;
  opacity: 1;
  padding: 20px;
  background: #f7f9fc;
  :deep(.arco-form-item) {
    margin-bottom: 0;
  }
}
.echarts {
  width: calc(100vw - 270px);
  height: calc(100vh - 570px);
}
.fotter {
  height: 64px;
  // border: 1px solid #000;
  position: fixed;
  left: 220px;
  bottom: 0px;
  width: calc(100vw - 220px);
  color: white;
  text-align: center;
  padding: 10px;
}
.report-container{
  display: flex;
  height: 100vh;
}
.report-left{
  width: 280px;
  padding: 0 24px;
}
.report-right{
  flex: 1;
 
  display: flex;
  align-items: center;
  justify-content: center;
}
.report-upload-title{
  color: #394D73;
  font-weight: 700;
}
.report-upload-content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}
.report-upload-icon{
  width: 24px;
  height: 24px;
}
</style>
